<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>首页</title>
    <link rel="stylesheet" href="../css/default.css" />
    <link rel="stylesheet" href="../css/home.css" />
  </head>
  <body>
    <div class="home clearfix">
      <!-- 左边内容 -->
      <div class="video-box f-l">
        <article class="pub-title-box">
          <p class="text">医院医废监控</p>
        </article>
        <!-- 视频部分 -->
        <div class="video">
          <div class="clearfix input-box">
            <input
              class="f-l input"
              type="text"
              placeholder="请选择日期"
              list="datalist"
            />
            <datalist id="datalist">
              <option value="126"></option>
              <option value="12689+"></option>
              <option value="126131"></option>
            </datalist>
            <span class="f-l search">搜索</span>
          </div>
          <div class="show-box">
            <img src="../images/home/img.png" width="100%" alt="" />
          </div>
        </div>
        <!-- end -->
      </div>
      <!-- end -->
      <!-- 右边内容 -->
      <div class="chart-box f-r">
        <div class="chart">
          <article class="pub-title-box">
            <p class="text">医院医废占比</p>
          </article>
          <div class="top clearfix">
            <ul class="list f-l">
              <li class="item item-select">单天</li>
              <li class="item">单周</li>
              <li class="item">单月</li>
              <li class="item">单年</li>
            </ul>
            <div
              class="circle-box f-r"
              id="circle"
              style="width: 76%;height:257px;"
            ></div>
          </div>
        </div>

        <div class="chart">
          <article class="pub-title-box">
            <p class="text">医院医废占比</p>
          </article>
          <div class="bottom">
            <div class="column-chart-box">
              <div class="column-box clearfix">
                <span class="f-l text">医废总重量</span>
                <span class="f-l number">2563KG</span>
                <p class="f-r company">（单位：KG）</p>
              </div>
              <div
                class="column"
                id="column"
                style="width: 100%;height:224px;"
              ></div>
            </div>
          </div>
        </div>
      </div>
      <!-- end -->
    </div>
    <!-- js -->
    <script src="../js/lib/echarts/index.js"></script>
    <script>
      // 饼状图
      var circleChart = echarts.init(document.getElementById("circle"));
      circleOption = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          right: 10,
          top: "middle",
          data: ["感 染 性", "药 物 性", "损 伤 性", "鼓 楼 区", "化 学 性"],
          itemWidth: 15,
          itemHeight: 15,
          icon: "rect"
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["50%", "80%"],
            center: ["35%", "45%"],
            data: [
              { value: 335, name: "感 染 性" },
              { value: 310, name: "药 物 性" },
              { value: 234, name: "损 伤 性" },
              { value: 135, name: "鼓 楼 区" },
              { value: 1548, name: "化 学 性" }
            ],
            itemStyle: {
              color: function(params, a) {
                //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                var colorList = [
                  "#4e78f1",
                  "#ef752d",
                  "#ff414a",
                  "#19aef1",
                  "#4bdbc6"
                ];
                return colorList[params.dataIndex];
                // return colorList[params.dataIndex];
                // console.log(colorList[params.dataIndex]);
              }
            }
          }
        ]
      };
      circleChart.setOption(circleOption);
      // end

      // 柱状图
      var columnChart = echarts.init(document.getElementById("column"));
      columnOption = {
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: "0",
          right: "0",
          bottom: "0",
          top: "40",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: ["11/28", "11/29", "11/30", "12/1", "12/2", "12/3", "12/4"],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            // name: "直接访问",
            type: "bar",
            barWidth: "14",
            data: [10, 52, 200, 334, 390, 330, 220],

            y: "0%",

            itemStyle: {
              normal: {
                barBorderRadius: 6,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#46d9c6" }, //柱图渐变色
                  { offset: 1, color: "#4179eb" } //柱图渐变色
                ]),

                label: {
                  formatter: function(params) {
                    return params.data + "kg";
                  },
                  show: true, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "#6e6e6e",
                    fontSize: 16
                  }
                }
              }
            }
          }
        ]
      };
      columnChart.setOption(columnOption);
      // end
    </script>
  </body>
</html>
